<script setup lang="ts">
const items = [
  { label: '前端框架', value: 'vue3', url: 'https://cn.vuejs.org/' },
  { label: '类型系统', value: 'typescript', url: 'https://www.typescriptlang.org/' },
  { label: '构建工具', value: 'vite', url: 'https://cn.vite.dev/' },
  { label: 'UI 组件库', value: 'element-plus', url: 'https://element-plus.org/' },
  { label: 'CSS 框架', value: 'tailwindcss', url: 'https://tailwindcss.com/' },
  { label: 'HTTP 请求', value: 'axios', url: 'https://axios-http.com/' },
  { label: '状态管理', value: 'pinia', url: 'https://pinia.vuejs.org/' },
  { label: '路由管理', value: 'vue-router', url: 'https://router.vuejs.org/' },
]
</script>

<template>
  <div class="container mx-auto flex flex-col gap-6">
    <div>
      <p class="text-gray-500 mt-2">这是一个基于 Vue 3 + TypeScript + Vite 的现代化前端开发模板</p>
      <el-divider />
    </div>

    <el-descriptions title="项目配置" :column="2" border>
      <el-descriptions-item
        v-for="item in items"
        :key="item.value"
        :label="item.label"
        size="small"
      >
        <el-link :href="item.url" target="_blank">{{ item.value }}</el-link>
      </el-descriptions-item>
    </el-descriptions>

    <TheWelcome />
  </div>
</template>
